<template>
  <div class="home">
    <div class="title">AS-全景预览</div>
    <viewer
      ref="Viewer"
      :init="init"
      @click="viewerClick"
      @marker="markerClick"
    />

    <div class="list">
      <img
        :src="require(`../assets/bg-${item}.webp`)"
        v-for="item in 6"
        :key="item"
        @click="handelChangeViewer(require(`../assets/bg-${item}.webp`))"
      />
    </div>
  </div>
</template>

<script setup>
import viewer from '@/components/Viewer.vue'
import { ref, reactive } from 'vue'
const Viewer = ref('Viewer')
const init = reactive({
  // 全景图
  imgurl: require('../assets/bg-0.webp'),
  // 是否显示底部操作栏
  navbar: false,
  // 底部title
  caption: '',
  // 标记点
  marker: [
    {
      id: 'image1',
      image: require('../assets/pin-blue.png'),
      width: 35,
      height: 35,
      longitude: 100,
      latitude: 100,
      anchor: 'bottom center',
      className: 'markers',
      tooltip: 'A circle of radius 30'
    },
    {
      id: 'image2',
      image: require('../assets/pin-blue.png'),
      width: 35,
      height: 35,
      longitude: 20,
      latitude: -0.15,
      anchor: 'bottom center',
      className: 'markers',
      tooltip: 'A circle of radius 2'
    },
    {
      id: 'circle',
      tooltip: 'A circle of radius 30',
      circle: 30,
      svgStyle: {
        fill: 'rgba(255,255,0,0.3)',
        stroke: 'yellow',
        strokeWidth: '2px'
      },
      latitude: 0.40272071451235414,
      longitude: 0.6356388767363009,
      anchor: 'center right'
    }
  ]
})
const viewerClick = data => {
  console.log(data, '点击非标记位置')
}
const markerClick = data => {
  console.log(data, '点击标记位置')
}
// 切换全景图 imgUrl: 全景图   marker：标记点
const handelChangeViewer = (imgUrl, marker) => {
  Viewer.value.handelChangeViewer(imgUrl, marker)
}
</script>
<style lang="scss" scoped>
.title {
  width: 100%;
  position: fixed;
  top: 0;
  text-align: center;
  z-index: 100;
  line-height: 44px;
  font-size: 16px;
  background-color: #fff;
}
.list {
  position: fixed;
  bottom: 50px;
  width: 100%;
  height: 110px;
  white-space: nowrap;
  z-index: 100;
  overflow-y: scroll;
  img {
    width: 150px;
    height: 100px;
    margin-right: 20px;
    border-radius: 8px;
    border: 1px solid beige;
    box-sizing: border-box;
    &:first-child {
      margin-left: 10px;
    }
  }
}
</style>
